<template>
    <div class="app-container">
        <tree-table :data="data"
                    :eval-args="args"
                    :expand-all="expandAll"
                    border>
            <el-table-column
                    align="center"
                    width="55"
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    label="权限名称"
                    min-width="200"
                    show-overflow-tooltip
                    align="left">
                <template slot-scope="scope">
                    <p>{{scope.row.Name}}</p>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    width="90"
                    prop="_level"
                    label="层级">
            </el-table-column>
            <el-table-column
                    align="left"
                    prop="__identity"
                    label="节点标识">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="80"
                    label="图标名称">
                <template slot-scope="scope">
                    <span>{{scope.row.Class}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="PId"
                    width="100"
                    label="Action">
            </el-table-column>

            <el-table-column
                    align="center"
                    width="100"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </tree-table>
    </div>
</template>

<script>

    import TreeTable from '../../components/TreeTable'

    export default {
        name: 'CustomTreeTableDemo',
        components: {TreeTable},
        data() {
            return {
                expandAll: true,
                data: [
                    {
                        "Id": 19,
                        "Name": "App",
                        "PId": null,
                        "Order": 1,
                        "Class": "iconfont icon-tuichu",
                        "Children": [
                            {
                                "Id": 1025,
                                "Name": "企业查询",
                                "PId": 19,
                                "Order": 1,
                                "Class": "iconfont icon-tuichu",

                                "Children": [
                                    {
                                        "Id": 1051,
                                        "Name": "企业列表",
                                        "PId": 1025,
                                        "Order": 1,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": []
                                    },
                                    {
                                        "Id": 1029,
                                        "Name": "企业明细",
                                        "PId": 1025,
                                        "Order": 2,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": []
                                    },
                                    {
                                        "Id": 1030,
                                        "Name": "投标战绩",
                                        "PId": 1025,
                                        "Order": 3,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": []
                                    }
                                ]
                            },
                            {
                                "Id": 1026,
                                "Name": "业绩查询",
                                "PId": 19,
                                "Order": 2,
                                "Class": "iconfont icon-tuichu",

                                "Children": [
                                    {
                                        "Id": 1031,
                                        "Name": "业绩列表",
                                        "PId": 1026,
                                        "Order": 1,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": []
                                    },
                                    {
                                        "Id": 1032,
                                        "Name": "业绩明细",
                                        "PId": 1026,
                                        "Order": 2,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "Id": 1,
                        "Name": "后台",
                        "PId": null,
                        "Order": 2,
                        "Class": "iconfont icon-tuichu",

                        "Children": [
                            {
                                "Id": 22,
                                "Name": "首页",
                                "PId": "平凡之路",
                                "Order": 1,
                                "Class": "iconfont icon-home",

                                "Children": []
                            },
                            {
                                "Id": 38,
                                "Name": "查询",
                                "PId": "平凡之路",
                                "Order": 3,
                                "Class": "iconfont icon-home",

                                "Children": []
                            },
                            {
                                "Id": 2,
                                "Name": "管理",
                                "PId": "平凡之路",
                                "Order": 99,
                                "Class": "iconfont icon-home",

                                "Children": [
                                    {
                                        "Id": 12,
                                        "Name": "用户管理",
                                        "PId": 2,
                                        "Order": 1,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": [
                                            {
                                                "Id": 3,
                                                "Name": "用户管理",
                                                "PId": 12,
                                                "Order": 1,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": [
                                                    {
                                                        "Id": 4,
                                                        "Name": "添加用户",
                                                        "PId": 3,
                                                        "Order": 2,
                                                        "Class": "iconfont icon-tuichu",
                                                        "Code": "1001",
                                                        "Children": []
                                                    },
                                                    {
                                                        "Id": 5,
                                                        "Name": "修改用户",
                                                        "PId": 3,
                                                        "Order": 3,
                                                        "Class": "iconfont icon-tuichu",
                                                        "Code": "1002",
                                                        "Children": []
                                                    },
                                                    {
                                                        "Id": 8,
                                                        "Name": "开启、关闭用户",
                                                        "PId": 3,
                                                        "Order": 6,
                                                        "Class": "iconfont icon-tuichu",
                                                        "Code": "1009",
                                                        "Children": []
                                                    },
                                                    {
                                                        "Id": 9,
                                                        "Name": "重置密码",
                                                        "PId": 3,
                                                        "Order": 7,
                                                        "Class": "iconfont icon-tuichu",
                                                        "Code": "2001",
                                                        "Children": []
                                                    },
                                                    {
                                                        "Id": 10,
                                                        "Name": "导出用户信息",
                                                        "PId": 3,
                                                        "Order": 8,
                                                        "Class": "iconfont icon-tuichu",
                                                        "Code": "1008",
                                                        "Children": []
                                                    }
                                                ]
                                            },
                                            {
                                                "Id": 39,
                                                "Name": "金币管理",
                                                "PId": 12,
                                                "Order": 2,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            },
                                            {
                                                "Id": 40,
                                                "Name": "使用量",
                                                "PId": 12,
                                                "Order": 3,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            },
                                            {
                                                "Id": 41,
                                                "Name": "业余采集",
                                                "PId": 12,
                                                "Order": 4,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            }
                                        ]
                                    },
                                    {
                                        "Id": 14,
                                        "Name": "相关设置",
                                        "PId": 2,
                                        "Order": 2,
                                        "Class": "iconfont icon-tuichu",

                                        "Children": [
                                            {
                                                "Id": 42,
                                                "Name": "预测参数管理",
                                                "PId": 14,
                                                "Order": 1,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            },
                                            {
                                                "Id": 43,
                                                "Name": "优惠活动",
                                                "PId": 14,
                                                "Order": 2,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            },
                                            {
                                                "Id": 44,
                                                "Name": "统计分析",
                                                "PId": 14,
                                                "Order": 3,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            },
                                            {
                                                "Id": 45,
                                                "Name": "CA设置",
                                                "PId": 14,
                                                "Order": 4,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            },
                                            {
                                                "Id": 46,
                                                "Name": "VIP价格",
                                                "PId": 14,
                                                "Order": 5,
                                                "Class": "iconfont icon-tuichu",

                                                "Children": []
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                args: [null, null, 'Name']
            }
        },
        methods: {
            message(row) {
                this.$message.info(row.event)
            },
            handleEdit(row) {
                console.log(row);
            },
            handleDelete(row) {
                console.log(row);
            }
        }
    }
</script>
